<template>
    <div class="index">
        <div class="main">
            <div class="scrollView">
                <scroll-view class="scroll" v-if="list.length" :scroll-y="true">
                    <div class="list">
                        <div class="item" v-for="(item, index) in list" :key="item.code" @click="toDetails({ item })">
                            <div class="stockChart">
                                <StockChart :details="item" />
                            </div>
                            <div class="technologyChart">
                                <TechnologyChart :caption="{
                                    title: item.name,
                                    k: item.analysis.latestKd.k?.toFixed(1)
                                }" :details="item" />
                            </div>
                        </div>
                    </div>
                </scroll-view>
            </div>
        </div>
        <div class="tab">
            <div class="list">
                <div class="item" v-for="(item, index) in tab.list" :key="index"
                    :class="{ current: tab.current == index }" @click="tabClick({ item, index })">
                    <div class="title">{{ item.title }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, watch, nextTick } from "vue"
import { useRouter } from "@/router"

import $u from "@/u"
import $api from "@/api"

import StockChart from "@/components/StockChart"
import TechnologyChart from "@/components/TechnologyChart"

const router = useRouter()

const tab = reactive({
    current: 0,
    list: [
        { title: "持仓" },
        { title: "自选" },
        { title: "推荐" },
        { title: "搜索" }
    ]
})

const list = reactive([])

watch(() => tab.current, async (current) => {
    list.length = 0
    await nextTick()
    if (current == 0) {
        await getStockHoldingList()
    }
    if (current == 1) {
        await getStockOptionalList()
    }
    else if (current == 2) {
        await getStockRecommendList()
    }
}, { immediate: true })


const toSearch = () => {
    router.push({ path: "/pages/index/search" })
}

const toDetails = ({ item }) => {
    let { code, type } = item
    $u.setClipboardData({ data: code })
    router.push({ path: "/pages/index/details", query: { code, type } })
}

const getStockHoldingList = async()=>{
    let { data } = await $api.stock.holding.list()
    list.push(...data)
}

const getStockOptionalList = async () => {
    let { data } = await $api.stock.optional.list()
    list.push(...data)
}

const getStockRecommendList = async () => {
    let { data } = await $api.stock.recommend.list()
    list.push(...data)
}

const tabClick = ({ index }) => {
    if (tab.list.length - 1 == index) {
        toSearch()
        return false
    }
    tab.current = index
}



</script>

<style lang="scss" scoped>
.index {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #161922;

    >.main {
        flex: 1;
        position: relative;

        >.scrollView {
            >.scroll {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;

                .list {

                    >.item {
                        position: relative;

                        >.stockChart {
                            height: 600upx;
                            pointer-events: none;
                        }

                        >.technologyChart {
                            height: 110upx;
                        }

                        >.hidden {
                            height: 710upx;

                            >.stockChart {
                                display: none;
                            }

                            >.technologyChart {
                                display: none;
                            }
                        }
                    }
                }
            }

        }
    }

    >.tab {
        $height: 96upx;
        height: $height;
        border-top: 1upx solid #000;

        >.list {
            display: flex;

            >.item {
                flex: 1;

                >.title {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    height: $height;
                    font-weight: bold;
                    color: #6a6c78;
                }

                &.current {
                    >.title {
                        color: $color1;
                    }
                }
            }
        }
    }
}
</style>
